<template>
  <view class="dashboard-container">
    <view class="header">
      <text class="title">数据看板</text>
      <text class="subtitle">系统运行概览</text>
    </view>

    <view class="date-filter">
      <text class="filter-label">统计周期</text>
      <view class="filter-buttons">
        <button 
          v-for="period in timePeriods" 
          :key="period.value"
          :class="['period-btn', { active: currentPeriod === period.value }]"
          @click="currentPeriod = period.value"
        >
          {{ period.label }}
        </button>
      </view>
    </view>

    <view class="stats-cards">
      <view class="stat-card primary">
        <view class="stat-icon">👥</view>
        <view class="stat-content">
          <text class="stat-value">{{ stats.totalUsers }}</text>
          <text class="stat-label">总用户数</text>
          <text class="stat-trend">↑ 12% 较上月</text>
        </view>
      </view>
      
      <view class="stat-card success">
        <view class="stat-icon">🏫</view>
        <view class="stat-content">
          <text class="stat-value">{{ stats.activeClassrooms }}</text>
          <text class="stat-label">活跃教室</text>
          <text class="stat-trend">↑ 5% 较上周</text>
        </view>
      </view>
      
      <view class="stat-card warning">
        <view class="stat-icon">✅</view>
        <view class="stat-content">
          <text class="stat-value">{{ stats.todayCheckins }}</text>
          <text class="stat-label">今日签到</text>
          <text class="stat-trend">↗ 正常</text>
        </view>
      </view>
      
      <view class="stat-card info">
        <view class="stat-icon">📅</view>
        <view class="stat-content">
          <text class="stat-value">{{ stats.totalReservations }}</text>
          <text class="stat-label">总预约数</text>
          <text class="stat-trend">↑ 8% 较上月</text>
        </view>
      </view>
    </view>

    <view class="charts-section">
      <view class="chart-card">
        <text class="chart-title">用户活跃趋势</text>
        <view class="chart-placeholder">
          <text>📈 图表区域 - 用户活跃度曲线图</text>
        </view>
      </view>
      
      <view class="chart-card">
        <text class="chart-title">教室使用率</text>
        <view class="chart-placeholder">
          <text>📊 图表区域 - 教室使用率饼图</text>
        </view>
      </view>
    </view>

    <view class="recent-activities">
      <view class="section-header">
        <text class="section-title">最近活动</text>
        <text class="view-all">查看全部</text>
      </view>
      
      <view class="activities-list">
        <view v-for="activity in activities" :key="activity.id" class="activity-item">
          <view class="activity-icon" :class="activity.type">
            {{ getActivityIcon(activity.type) }}
          </view>
          <view class="activity-content">
            <text class="activity-text">{{ activity.text }}</text>
            <text class="activity-time">{{ activity.time }}</text>
          </view>
          <view class="activity-badge" :class="activity.status">
            {{ activity.status === 'success' ? '正常' : '异常' }}
          </view>
        </view>
      </view>
    </view>

    <view class="system-status">
      <view class="section-header">
        <text class="section-title">系统状态</text>
        <text class="status-indicator" :class="systemStatus">
          {{ systemStatus === 'normal' ? '运行正常' : '异常' }}
        </text>
      </view>
      
      <view class="status-grid">
        <view class="status-item">
          <text class="status-label">API服务</text>
          <view class="status-dot online"></view>
        </view>
        <view class="status-item">
          <text class="status-label">数据库</text>
          <view class="status-dot online"></view>
        </view>
        <view class="status-item">
          <text class="status-label">文件存储</text>
          <view class="status-dot online"></view>
        </view>
        <view class="status-item">
          <text class="status-label">推送服务</text>
          <view class="status-dot warning"></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentPeriod: 'week',
      timePeriods: [
        { label: '今天', value: 'today' },
        { label: '本周', value: 'week' },
        { label: '本月', value: 'month' },
        { label: '全年', value: 'year' }
      ],
      stats: {
        totalUsers: 1245,
        activeClassrooms: 23,
        todayCheckins: 567,
        totalReservations: 89
      },
      activities: [
        {
          id: 1,
          type: 'checkin',
          text: '学生张三完成了Web前端开发课程签到',
          time: '10分钟前',
          status: 'success'
        },
        {
          id: 2,
          type: 'reservation',
          text: '教师李老师预约了A101教室',
          time: '30分钟前',
          status: 'success'
        },
        {
          id: 3,
          type: 'system',
          text: '系统自动备份完成',
          time: '1小时前',
          status: 'success'
        },
        {
          id: 4,
          type: 'warning',
          text: 'B201教室空调设备异常',
          time: '2小时前',
          status: 'warning'
        },
        {
          id: 5,
          type: 'user',
          text: '新用户王五注册成功',
          time: '3小时前',
          status: 'success'
        }
      ],
      systemStatus: 'normal'
    }
  },
  
  onLoad() {
    this.loadDashboardData()
  },
  
  onPullDownRefresh() {
    this.loadDashboardData().then(() => {
      uni.stopPullDownRefresh()
    })
  },
  
  methods: {
    async loadDashboardData() {
      // 模拟加载数据
      await new Promise(resolve => setTimeout(resolve, 1000))
      
      // 这里应该调用API获取真实数据
      this.stats = {
        totalUsers: 1245 + Math.floor(Math.random() * 10),
        activeClassrooms: 23 + Math.floor(Math.random() * 3),
        todayCheckins: 567 + Math.floor(Math.random() * 20),
        totalReservations: 89 + Math.floor(Math.random() * 5)
      }
    },
    
    getActivityIcon(type) {
      const icons = {
        checkin: '✅',
        reservation: '📅',
        system: '⚙️',
        warning: '⚠️',
        user: '👤'
      }
      return icons[type] || '🔔'
    }
  }
}
</script>

<style scoped>
.dashboard-container {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 30rpx;
}

.header {
  margin-bottom: 40rpx;
}

.title {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.subtitle {
  font-size: 24rpx;
  color: #666;
}

.date-filter {
  background: white;
  border-radius: 15rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
}

.filter-label {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 20rpx;
  font-weight: 500;
}

.filter-buttons {
  display: flex;
  gap: 15rpx;
}

.period-btn {
  flex: 1;
  border: 2rpx solid #e0e0e0;
  background: white;
  border-radius: 8rpx;
  padding: 20rpx;
  font-size: 24rpx;
  transition: all 0.3s;
}

.period-btn.active {
  background: #667eea;
  color: white;
  border-color: #667eea;
}

.stats-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20rpx;
  margin-bottom: 30rpx;
}

.stat-card {
  background: white;
  border-radius: 15rpx;
  padding: 30rpx;
  display: flex;
  align-items: center;
  border-left: 6rpx solid;
}

.stat-card.primary {
  border-left-color: #667eea;
}

.stat-card.success {
  border-left-color: #4caf50;
}

.stat-card.warning {
  border-left-color: #ff9800;
}

.stat-card.info {
  border-left-color: #2196f3;
}

.stat-icon {
  font-size: 48rpx;
  margin-right: 20rpx;
}

.stat-content {
  flex: 1;
}

.stat-value {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 5rpx;
}

.stat-label {
  display: block;
  font-size: 24rpx;
  color: #666;
  margin-bottom: 5rpx;
}

.stat-trend {
  font-size: 20rpx;
  color: #4caf50;
}

.charts-section {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30rpx;
  margin-bottom: 30rpx;
}

.chart-card {
  background: white;
  border-radius: 15rpx;
  padding: 30rpx;
}

.chart-title {
  display: block;
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
}

.chart-placeholder {
  height: 300rpx;
  background: #f8f9fa;
  border-radius: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 24rpx;
}

.recent-activities {
  background: white;
  border-radius: 15rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.view-all {
  font-size: 24rpx;
  color: #667eea;
}

.activities-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.activity-item {
  display: flex;
  align-items: center;
  gap: 20rpx;
  padding: 20rpx;
  background: #f8f9fa;
  border-radius: 10rpx;
}

.activity-icon {
  font-size: 36rpx;
  width: 60rpx;
  text-align: center;
}

.activity-content {
  flex: 1;
}

.activity-text {
  display: block;
  font-size: 26rpx;
  color: #333;
  margin-bottom: 8rpx;
}

.activity-time {
  font-size: 22rpx;
  color: #999;
}

.activity-badge {
  padding: 8rpx 16rpx;
  border-radius: 15rpx;
  font-size: 20rpx;
}

.activity-badge.success {
  background: #e8f5e8;
  color: #4caf50;
}

.activity-badge.warning {
  background: #fff3e0;
  color: #ff9800;
}

.system-status {
  background: white;
  border-radius: 15rpx;
  padding: 30rpx;
}

.status-indicator {
  padding: 8rpx 16rpx;
  border-radius: 15rpx;
  font-size: 22rpx;
  background: #e8f5e8;
  color: #4caf50;
}

.status-indicator.warning {
  background: #fff3e0;
  color: #ff9800;
}

.status-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20rpx;
}

.status-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  background: #f8f9fa;
  border-radius: 8rpx;
}

.status-label {
  font-size: 24rpx;
  color: #333;
}

.status-dot {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
}

.status-dot.online {
  background: #4caf50;
}

.status-dot.warning {
  background: #ff9800;
}

.status-dot.offline {
  background: #f44336;
}
</style>